<!--
 * @Author: LuZeng
 * @Date: 2022-08-29 14:05:42
 * @LastEditTime: 2022-09-01 15:52:04
 * @LastEditors: LuZeng
 * @Description: 小白本白，写的不好多多包涵！！！
 * @FilePath: \jsd:\rjiananzhuang\WEB\WEB workspace\lot-music\src\views\Detail\SingerMv.vue
 * 别乱动！
-->
<template>
  <div class="list">
    <mv-item
      v-for="item in mvList"
      :key="item.id"
      :imgUrl="item.imgurl"
      :tilte="item.name"
      :authorList="item.artist.alias"
      :id="item.id"
    ></mv-item>
  </div>
</template>
<script>
import { getSingerMvAPI } from "@/api";
import MvItem from "@/components/MVItem";
export default {
  name: "SingerMv",
  components: {
    MvItem,
  },
  data() {
    return {
      mvList: [],
    };
  },
  methods: {
    async getSingerMv() {
      const res = await getSingerMvAPI({ id: this.id });
      this.mvList = res.data.mvs;
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  created() {
    this.getSingerMv();
  },
};
</script>

<style>
.list {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>